<template>
  <div class="box">
    <Header v-if="bool" />
    <Headera v-else />
    <div class="content">
      <Neck />
      <div class="content-p">
        <p @click="fun1()">
          <!--  -->
          <van-notice-bar left-icon="volume-o" :scrollable="false">
            <van-swipe vertical class="notice-swipe" :autoplay="4000" :show-indicators="false">
              <van-swipe-item><span>市场</span>&nbsp;&nbsp;房企释放偿债信号地产美元债市场迎"暖流"</van-swipe-item>
              <van-swipe-item><span>宏观</span>&nbsp;&nbsp;房企释放偿债信号地产美元债市场迎"暖流"</van-swipe-item>
              <van-swipe-item><span>前景</span>&nbsp;&nbsp;房企释放偿债信号地产美元债市场迎"暖流"</van-swipe-item>
            </van-swipe>
          </van-notice-bar>
        </p>
      </div>
      <div class="min">
        <Main
          v-for="(v, i) in this.$store.state.home.list"
          :key="i"
          :texta="v.data"
          :textb="v.datab"
          :textc="v.datac"
        />
      </div>
      <Main />
      <div class="img">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item><img src="images/1_03.gif" alt="" /></van-swipe-item>
          <van-swipe-item> <img src="images/1_07.gif" alt="" /></van-swipe-item>
          <van-swipe-item><img src="images/1_10.gif" alt="" /></van-swipe-item>
          <van-swipe-item><img src="images/1_12.gif" alt="" /></van-swipe-item>
        </van-swipe>
      </div>
      <div class="date">
        <p>
          <span class="date-a">金融日历</span>
          <span>更多</span>
        </p>
        <Date />
      </div>
    </div>
    <Btn />
  </div>
</template>

<script>
import Header from "@/components/home-page/header.vue";
import Headera from "@/components/home-page/headera.vue";
import Neck from "@/components/home-page/neck.vue";
import Main from "@/components/home-page/main.vue";
import Date from "@/components/home-page/date.vue";
import Btn from "@/components/bottomBar.vue";
import Vue from "vue";
import { Swipe, SwipeItem } from "vant";
import { NoticeBar } from 'vant';

Vue.use(NoticeBar);
Vue.use(Swipe);
Vue.use(SwipeItem);
// import getlink from "@/api/getapi.js"
export default {
  data() {
    return {
      bool: true,
      // list:[]
      //  list:[
      //   {data:"iconfont icon-cunkuan",datab:"存款",datac:"/deposit"},
      //   {data:"iconfont icon-zhuanzhanghuikuan",datab:"转账汇救",datac:"/transfer"},
      //   {data:"iconfont icon-daikuan",datab:"贷款",datac:""},
      //   {data:"iconfont icon-shenghuojiaofei",datab:"生活缴费",datac:""},
      //   {data:"iconfont icon-xiaoweijinrongzichan",datab:"小微金融",datac:""},
      //   {data:"iconfont icon-anquanzhongxin",datab:"账户安全锁",datac:""},
      //   {data:"iconfont icon-guijinshu",datab:"贵金属",datac:""},
      //   {data:"iconfont icon-xitongpingtai-xiaoxizhongxin-xinshixinxi",datab:"工银信使",datac:""},
      //   {data:"iconfont icon-renwuzhongxin",datab:"任务中心",datac:""},
      //   {data:"iconfont icon-e",datab:"全部",datac:""},
      //  ]
    };
  },
  methods: {
    fun1() {
      this.$router.push("/transfer");
    },
  },
  created() {
    window.onscroll = () => {
      var h = document.documentElement.scrollTop || document.body.scrollTop;
      if (h > 30) {
        this.bool = false;
      } else {
        this.bool = true;
      }
    };
    // getlink("/mock/data/bankdata").then((ok)=>{
    //   // console.log(ok.data.list);
    //   this.list=ok.data.list
    // })
    this.$store.dispatch("pagelink", "/mock/data/bankdata");
  },
  components: {
    Header,
    Headera,
    Neck,
    Main,
    Date,
    Btn,
  },
};
</script>

<style scoped>
.box {
  font-size: 0.15rem;
  display: flex;
  justify-content: center;
}
.content {
  width: 100%;
  height: 8rem;
  margin-top: 0.3rem;
}
.content p {
  width: 2.9rem;
  margin: auto;
  font-size: 0.1rem;
}
.content-p {
  height: 0.43rem;
  line-height: 0.43rem;
}
.p1 {
  color: red;
  margin-right: 0.06rem;
}
.p2 {
  margin-left: 0.5rem;
}
.img {
  width: 2.9rem;
  height: 0.96rem;
  margin: auto;
}
.img img {
  width: 2.9rem;
  height: 0.66rem;
  display: block;
  padding: 0.16rem 0;
}
.date p {
  display: flex;
  justify-content: space-between;
}
.date-a {
  font-size: 0.16rem;
  font-weight: 900;
}
.min {
  width: 100%;
  height: 1.4rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 0.66rem;
  text-align: center;
}
 .notice-swipe {
    height: 40px;
    line-height: 40px;
  }
  .notice-swipe span{
    color: red;
  }
</style>
